<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div class="title">主要的网页标题</div>
<div class="content">
<div class="left_content">
    <p>1</p>
    <p>2</p>
</div>
<div class="right_content"></div>
</div>
<div class="footer">底部</div>

<body style="background-color: rgb(100, 150, 221);">
<table border="10">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
    <p>askndasndb <span style="white-space: pre,">jks</span> nkdbuwjbadandnasbdajksbdasblkdlaasdnasjkbdajsb</p>
    <p style="background-color: white;">aoch'a<br>acnklasc<br>ihsbfvjls</p>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <p>段落</p>
    <img src="\D:\Pictures\Camera Roll\微信图片_20250305090021.png" width="300"height="400"class="img">
    <p class="change_color"><a href="http://www.4399.com/">红温小游戏</a></p>
    <style>
        .title{
            border: 10px solid yellow;
            font-size: 30px;
            background: #ff6b6b;
        }
        .left_content{
            border: 5px solid blue;
            background-color: gold;
            height: 350px;
            width: 30%;
        }
        .right_content{
            border: 5px solid green;
            background-color:rgb(5, 212, 139);
            width: 100%;
        }
        .content{
            display: flex;
        }
        .footer{
            border: darkcyan;
            background-color: yellowgreen;
            text-align: center;
        }
        .img{
            width: 700px;
            height: 400px;
        }
        .change_color{
            color: blue;
            /*dotted点状虚线 solid 实线 double 双线 dashed 虚线*/
            border: 1px dotted green;
            background-color: yellow;
            /*left 左边 right 右边 center 居中 justify 两端对齐 inherit 规定应该从父元素继承 text-align 属性的值*/
            text-align: center;
            width : 200px;
            height: 200px;
            margin: auto;
            border-radius: 0%;
            font-size: 20px;
            /*内边距 padding*/
                padding: 10px; }
        .change_color:hover{
            background: red;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            border: 10px double blue;
            text-align: center;
            margin: auto;
        } 
        
    </style>
</body>
</html>